<!-- eslint-disable vue/multi-word-component-names -->
<script setup>
import {
 ChromeFilled,
 User
} from '@element-plus/icons-vue'
import {useCounterStore} from "../../stores/counter"
import { useRouter } from 'vue-router'
const counter=useCounterStore()
const router=useRouter()
const handleCloseBooel=()=>{
    counter.DatahandleClose()
}
const LoginOut=()=>{
    localStorage.removeItem("token")
    router.push('/')
    console.log(123);
}
const UserManage=()=>{
    router.push("/center")
}
</script>
<template>
    <div class="header">
     <el-header>
        <div class="top">
            <div class="page-left">
              <el-icon :size="30" color="#ffffff" @click="handleCloseBooel()"><ChromeFilled /></el-icon>
              <h3>星空科技企业管理网站</h3>
            </div>
            <div class="page-riget">
 <h3>欢迎{{counter.users.user}}回来</h3>
      <el-dropdown placement="bottom">
      <el-icon :size="30" color="#ffffff"><User /></el-icon>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="UserManage">个人中心</el-dropdown-item>
          <el-dropdown-item @click="LoginOut">退出</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown> 
            </div>
       </div>
     </el-header>
    </div>
</template>
<style scoped lang="less">
.header{
    background: #0f4471;
}
 .top{
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .page-left{
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 30px;
        h3{
            margin-left: 10px;
            color: #ffffff;
            font-size: 20px;
            letter-spacing: 2px;
            font-weight: 400;
        }
    }
    .page-riget{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20px;
        h3{
           margin-right:20px;
           color: #ffffff;
           font-weight: 500;
           letter-spacing: 2px;
        }
    }
 }
</style>